import React from 'react';
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
import Icon from '@ant-design/icons';

const DeleteSvg = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M6 12V6H7V12H6Z" fill="#777F93" />
    <path d="M9 6V12H10V6H9Z" fill="#777F93" />
    <path
      d="M10.5 3H14V4H13V14C13 14.5523 12.5523 15 12 15H4C3.44772 15 3 14.5523 3 14V4H2V3H5.5L5.5 1.8C5.5 1.35817 5.85817 1 6.3 1H9.7C10.1418 1 10.5 1.35817 10.5 1.8V3ZM6.5 3H9.5L9.5 2L6.5 2V3ZM4 4V14H12V4H4Z"
      fill="#777F93"
    />
  </svg>
);

const DeleteOutlined = (props: Partial<CustomIconComponentProps> & { onClick?: () => void }) => {
  return <Icon component={DeleteSvg} {...props} />;
};

export default DeleteOutlined;
